<template>
  <main class="layout">
    <el-row class="layout-left">
      <el-col>
        <HMenu ref="menu" :isCollapse.sync="isCollapse"></HMenu>
      </el-col>
    </el-row>
    <section class="layout-right">
      <Header></Header>
      <section
        style="
          width: 100%;
          height: calc(100vh - 6rem);
          background-color: #f0f2f5;
        "
      >
        <router-view></router-view>
      </section>
    </section>
  </main>
</template>

<script>
import HMenu from '../components/menus/HMenu.vue';
import Header from './Header.vue';
export default {
  name: "Layout",
  components: { HMenu, Header },
  data () {
    return {
      isCollapse: false
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  //   background: #10b89f;
  &-left {
    width: auto;
    height: 100%;
    // border: 1px solid red;
  }
  &-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // background: #852;
  }
}
</style>